﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQueryHTML之after()和before()</title>
        <script src="js/jquery-3.6.1.min.js"></script>
    </head>
    <body>
        <h3>jQueryHTML之after()和before()</h3>
        <hr>
        <img src="image/youhua2.jpg" />
		<br>
        <button id="btn01">after()</button>
        <button id="btn02">before()</button>
        <script>
            $(document).ready(function() {
				//按钮1的点击事件：在<img>元素之后追加内容
                $("#btn01").click(function() {
					$("img").after("<p>Bye!</p>");				
                });
				//按钮2的点击事件：在<img>元素之前追加内容
                $("#btn02").click(function() {
					$("img").before("<p>Hello!</p>");							
                });
            });
        </script>
	</body>
</html>
